<template>
	<view class="box">
		<image class="img" :src="listshis.image"></image>
		<view class="fu" v-html="util.checkImg(listshis.content)"></view>
		<view class="box_s" style="font-size: 24rpx !important" v-if="!re">
			<view class="tou">请先阅读会员协议并同意</view>
			<scroll-view scroll-y="true">
				<view class="ss"  v-html="util.checkImg(xeiyi)"></view>
			</scroll-view>
			<view class="butt">
			   <view v-if="index>0">{{index}}拒绝</view>
			    <view v-if="index==0" @click="jeu()">拒绝</view>
			    <view v-if="index>0">{{index}}同意</view>
				 <view v-if="index==0" @click="tt()">同意</view>
			</view>
		</view>
			
		<view class="open" @click="open_s()">开通会员卡</view>
	</view>
</template>

<script>
	import Pay from '@/shopro/pay';
	export default {
		data() {
			return {
				id: '',
				listshis: '',
				xeiyi:'',
				index:10,
				re:true,
				tong:1
			}
		},
		onLoad(e) {
			this.id = e.from
			console.log(this.id, "穿的id")
			this.lvshis_ss()
		},
		onShow() {
			this.lvshis_sss()
			
		},
		methods: {
			tt(){
				this.re=!this.re
				this.tong=2
			},
			jeu(){
				this.re=!this.re
				this.index=10
				 // clearInterval(a)
			},
			lvshis_ss() {
				this.$http('addons.vipdetail', {
					level: this.id,
				}).then(res => {
					console.log(res, "会员卡详情")
					if (res.code === 1) {
						this.listshis = res.data[0]
					}
				});
			},
			lvshis_sss() {
				this.$http('addons.richtext', {
					id: 1,
				}).then(res => {
					console.log(res, "会员协议")
					if (res.code === 1) {
						this.xeiyi = res.data.content
					}
				});
			},
			open_s() {
				if(this.tong==1){
					this.re=!this.re
				 var a= setInterval(()=>{
						 if(this.index>0){
							 this.index--;
						 }else{
							 clearInterval(a)
						 }
				    	// console.log( this.index, "穿的id")
				            
				    		
				        },1000);
				}else{
					this.$http('addons.vipsubmitl', {
						level: this.id,
					}).then(res => {
						console.log(res, "购买会员")
						if (res.code === 1) {
							uni.requestPayment({
								provider: 'wxpay', // 服务提提供商
								timeStamp: res.data.timeStamp, // 时间戳
								nonceStr: res.data.nonceStr, // 随机字符串
								package: res.data.package,
								signType: res.data.signType, // 签名算法
								paySign: res.data.paySign, // 签名
								success: function(res) {
									console.log('支付成功', res);
									// 业务逻辑。。。
								},
								fail: function(err) {
									console.log('支付失败', err);
								}
							});
					
					
					
						}
					});
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 30rpx;

		.img {
			width: 100%;
			height: 300rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}

		.open {
			margin: auto;
			margin-top: 130rpx;
			width: 612rpx;
			height: 88rpx;
			background-color: #2442CB;
			border-radius: 10rpx;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
			font-size: 36rpx;

		}
	}
	.box_s{
		position: fixed;
		top: 100rpx;
		left: 100rpx;
		background-color:#fff;
		width: 550rpx;
		height: 800rpx;
		border-radius: 20rpx;
		scroll-view{
			width: 550rpx;
			height: 700rpx;
			overflow: hidden;
			// font-size: 200rpx;
			.ss{
				width: 550rpx;
				height: 700rpx;
				// font-size: 24rpx;
			}
			
		}
		.butt{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			view{
				border: 2rpx solid #000;
				padding: 5rpx 30rpx;
				border-radius: 20rpx;
			}
		}
	}
	.tou{
		text-align: center;
	}
</style>
